<script setup>
import { useUserStore } from '@/stores'
import { ref, onMounted } from 'vue'
import { getLikeListService } from '@/api/member'
import GoodsItem from '@/views/Home/components/GoodsItem.vue'
import {
  getAddressListService,
  delAddressService,
  updateAddressService
} from '@/api/order'
const userStore = useUserStore()
const likeList = ref([])
onMounted(async () => {
  await getAddressList()
  const res = await getLikeListService({ limit: 4 })
  likeList.value = res.data.result
})

//收获地址管理
const addressList = ref([])
const isShowAddress = ref(false)
const isUpdateAddress = ref(false)
const getAddressList = async () => {
  const { data: result } = await getAddressListService()
  addressList.value = result.result
}
//删除地址
const confirmDel = async (id) => {
  await delAddressService(id)
  await getAddressList()
}
//修改地址
//筛选数据
const formModel = ref({})
const startUpdate = (id) => {
  console.log(id)
  isUpdateAddress.value = true
  formModel.value = addressList.value.find((item) => item.id === id) //筛选出要修改的数据赋值给formModel
  formModel.value.isDefault = formModel.value.isDefault === 0 ? true : false //默认地址从01转换为true false
  console.log(formModel.value)
}
const confirmUpdate = async () => {
  console.log(formModel.value)
  isUpdateAddress.value = false
  await updateAddressService(formModel.value)
  await getAddressList()
}
</script>

<template>
  <div class="home-overview">
    <!-- 用户信息 -->
    <div class="user-meta">
      <div class="avatar">
        <img :src="userStore.userInfo?.avatar" />
      </div>
      <h4>{{ userStore.userInfo?.account }}</h4>
    </div>
    <div class="item">
      <a href="javascript:;">
        <span class="iconfont icon-hy"></span>
        <p>会员中心</p>
      </a>
      <a href="javascript:;">
        <span class="iconfont icon-aq"></span>
        <p>安全设置</p>
      </a>
      <a href="javascript:;" @click="isShowAddress = true">
        <span class="iconfont icon-dw"></span>
        <p>地址管理</p>
      </a>
    </div>
  </div>
  <div class="like-container">
    <div class="home-panel">
      <div class="header">
        <h4 data-v-bcb266e0="">猜你喜欢</h4>
      </div>
      <div class="goods-list">
        <GoodsItem v-for="goods in likeList" :key="goods.id" :goods="goods" />
      </div>
    </div>
  </div>
  <!-- 收货地址管理 -->
  <el-dialog v-model="isShowAddress" title="地址管理" width="800">
    <div class="addressWrapper">
      <div class="addressItem" v-for="item in addressList" :key="item.id">
        <ul>
          <li>
            <span>收<i />货<i />人：</span>{{ item.receiver }}
          </li>
          <li><span>联系方式：</span>{{ item.contact }}</li>
          <li><span>收获地址：</span>{{ item.fullLocation + item.address }}</li>
          <el-popconfirm title="你确定要删除吗" confirm-button-text="确定" cancel-button-text="取消"
            @confirm="confirmDel(item.id)">
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
          <el-button type="primary" @click="startUpdate(item.id)">修改</el-button>
        </ul>
      </div>
    </div>
    <el-dialog title="修改地址" v-model="isUpdateAddress" style="overflow-y: auto">
      <el-form label-width="80px" :modelValue="formModel">
        <el-form-item label="姓名">
          <el-input v-model="formModel.receiver"></el-input>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="formModel.contact"></el-input>
        </el-form-item>
        <el-form-item label="省份编码">
          <el-input v-model="formModel.provinceCode"></el-input>
        </el-form-item>
        <el-form-item label="城市编码">
          <el-input v-model="formModel.cityCode"></el-input>
        </el-form-item>
        <el-form-item label="地区编码">
          <el-input v-model="formModel.countyCode"></el-input>
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input v-model="formModel.address"></el-input>
        </el-form-item>
        <el-form-item label="邮政编码">
          <el-input v-model="formModel.postalCode"></el-input>
        </el-form-item>
        <el-form-item label="地址标签">
          <el-input v-model="formModel.addressTags"></el-input>
        </el-form-item>
        <el-form-item label="是否默认">
          <el-checkbox v-model="formModel.isDefault"></el-checkbox>
        </el-form-item>
        <el-form-item label="完整地址">
          <el-input v-model="formModel.fullLocation"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="confirmUpdate">确定</el-button>
      </template>
    </el-dialog>
  </el-dialog>
</template>

<style scoped lang="scss">
.home-overview {
  height: 132px;
  background: url(@/assets/images/center-bg.png) no-repeat center / cover;
  display: flex;

  .user-meta {
    flex: 1;
    display: flex;
    align-items: center;

    .avatar {
      width: 85px;
      height: 85px;
      border-radius: 50%;
      overflow: hidden;
      margin-left: 60px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    h4 {
      padding-left: 26px;
      font-size: 18px;
      font-weight: normal;
      color: white;
    }
  }

  .item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-around;

    &:first-child {
      border-right: 1px solid #f4f4f4;
    }

    a {
      color: white;
      font-size: 16px;
      text-align: center;

      .iconfont {
        font-size: 32px;
      }

      p {
        line-height: 32px;
      }
    }
  }
}

.like-container {
  margin-top: 20px;
  border-radius: 4px;
  background-color: #fff;
}

.home-panel {
  background-color: #fff;
  padding: 0 20px;
  margin-top: 20px;
  height: 400px;

  .header {
    height: 66px;
    border-bottom: 1px solid #f5f5f5;
    padding: 18px 0;
    display: flex;
    justify-content: space-between;
    align-items: baseline;

    h4 {
      font-size: 22px;
      font-weight: 400;
    }
  }

  .goods-list {
    display: flex;
    justify-content: space-around;
  }
}

.addressWrapper {
  max-height: 500px;
  overflow-y: auto;

  .addressItem {
    padding: 20px;
    border: 1px solid #f5f5f5;
    margin-bottom: 10px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;

    &:hover {
      border-color: $xtxColor;
      background: lighten($xtxColor, 50%);
    }

    ul {
      li {
        margin-bottom: 10px;

        span {
          color: #999;
        }
      }
    }
  }
}
</style>
